<template>
  <header-option>
    <template v-slot:single>
      <el-input
        placeholder="请输入商户名称"
        v-model="headerData.merchantName"
        class="headerInput_G headerRightMargin_G"
      ></el-input>
      <el-input
        placeholder="请输入小区名称"
        v-model="headerData.communityName"
        class="headerInput_G headerRightMargin_G"
      ></el-input>
      <el-input
        placeholder="请输入联系电话"
        v-model="headerData.phone"
        class="headerInput_G headerRightMargin_G"
      ></el-input>
      <cs-btn
        type="search"
        btnText="查询"
        @click.native="headerSearchBtnClick"
      />
    </template>
  </header-option>
</template>

<script>
import HeaderOption from "@/components/HeaderOption/HeaderOption.vue";
import CsBtn from "@/components/CsBtn/CsBtn.vue";

export default {
  name: "settledResidentialAreaHeader",
  components: {
    HeaderOption,
    CsBtn,
  },
  data() {
    return {
      headerData: {
        merchantName: "",
        communityName: "",
        phone: "",
      },
    };
  },
  methods: {
    headerSearchBtnClick() {
      this.$emit("headerSearchBtnClick", this.headerData);
    },
  },
};
</script>

<style lang="scss" scoped></style>
